<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog v-model="props.DialogVisible" title=" 查看日志详情 " width="800px" @close="handleVisible()">
    <div>
      <el-table :data="logList" v-loading="loading">
        <el-table-column label="任务ID" align="center" prop="taskId" show-overflow-tooltip fixed="left" />
        <el-table-column label="请求参数" align="center" prop="requestData" show-overflow-tooltip />
        <el-table-column label="返回参数" align="center" prop="responseData" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.status === 0 ? '成功' : '失败' }}
          </template>
        </el-table-column>
        <el-table-column label="数据迁移总条数" align="center" prop="totalNumber" show-overflow-tooltip />
        <el-table-column label="数据迁移成功数" align="center" prop="successNumber" show-overflow-tooltip />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="handleVisible()">关闭</el-button>
      </div>
    </template>
    <div class="pagenation">
      <el-pagination
        v-show="total > 0"
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { getLogList } from '@/api/dataIntegration/dataSync';
const props = defineProps(['DialogVisible', 'taskId']);
const emit = defineEmits(['handleEvent']);
const loading = ref(false);
const total = ref(0);
const logList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  taskId: props.taskId,
  isAsc: 'descending'
});

// 关闭弹窗
const handleVisible = () => {
  emit('handleEvent');
};

// 切换页码
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  getList();
};

// 获取列表数据
const getList = () => {
  loading.value = true;
  getLogList(queryParams.value)
    .then((res) => {
      if (res) {
        logList.value = res?.rows || [];
        loading.value = false;
        total.value = res?.total || 0;
      }
    })
    .catch(() => {
      logList.value = [];
    });
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.pagenation {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>
